<template>
	<div>
		<el-row type="flex" class="row-bg" justify="center">
			<el-col ></el-col>
			<el-col >
				<GobangCanvas :chessData="chessData" :clickCallback="clickCallback" />
			</el-col>
			<el-col style='text-align:left;'>
				<br />
				<h3>总步数：{{chessDatas.length}}</h3>
				<h3>当前步数：{{chessDataN}}</h3>
				<h3>当前下棋：{{chessData.value == 1 ? "白棋":"黑棋"}}</h3>
				<h3>当前状态：{{chessData.label}}</h3>
			</el-col>
		</el-row>
		<br />
		<el-row type="flex" v-if="!isReview" class="row-bg" justify="center">
			<el-button type="danger" :disabled='but_hq' @click='repentantChess'>悔棋</el-button>
			<el-button type="warning" :disabled='but_cxks' @click='start'>重新开始</el-button>
			<el-button type="primary" :disabled='but_ksyx' @click='start'>开始游戏</el-button>
		</el-row>
		<el-row type="flex" v-else class="row-bg" justify="center">
			<el-button type="info" :disabled='but_syb' @click='reviewPlus'>上一步</el-button>
			<el-button type="info" :disabled='but_xyb' @click='reviewMinus'>下一步</el-button>
			<el-button type="danger" @click='start'>退出复盘</el-button>
		</el-row>
	</div>
</template>

<script>
	import GobangCanvas from '@/components/GobangCanvas.vue'
	import requests from '@/utils/requests.js'

	export default {
		name: 'Gobang',
		components: {
			GobangCanvas
		},
		data() {
			return {
				chessData: {
					matrix: [],
					label: '初始化棋盘',
					value: 2,
					win: 0,
					depth: 0,
					over: false,
					notClick: true,
				},
				chessDatas: [],
				chessDataN: 0,
				clickCallback: () => {},
				value: [],
				lineNums: 15,
				but_hq: true,
				but_ksyx: false,
				but_cxks: true,
				but_syb: true,
				but_xyb: true,
				isReview: false,
				but_syb: true,
				but_xyb: true,
			}
		},
		methods: {
			start() {
				this.isReview = false;
				this.but_cxks = false;
				this.but_ksyx = true;
				this.chessData.matrix = [];
				for (let i = 0; i < this.lineNums; i++) {
					this.chessData.matrix.push(new Array(this.lineNums).fill(0, 0, this.lineNums));
				}
				this.clickCallback = this.PlayerVsPlayer;
				this.chessData.notClick = false;
				this.chessData.label = "开始游戏";
				this.chessData.value = 2;
				this.chessData.win = 0;
				this.chessData.over = false;
				this.chessDatas = [];
				this.chessDataN = 0;
			},
			victory() {
				if (this.chessData.over || this.chessData.win) {
					let text = this.chessData.win == 1 ? '白棋' : '黑棋';
					this.chessData.over = true;
					this.chessData.notClick = true;
					this.chessData.label = text + '获胜!';
					this.chessDatas.push(JSON.parse(JSON.stringify(this.chessData)));
					this.chessDataN = this.chessDatas.length;
					this.but_hq = true;
					this.$confirm(text + '获胜, 是否复盘?', '提示', {
						confirmButtonText: '复盘',
						cancelButtonText: '取消',
						type: 'success'
					}).then(() => {
						this.chessDataN = 1;
						this.review();
					}).catch(() => {
					});
					return true;
				}
				this.chessDatas.push(JSON.parse(JSON.stringify(this.chessData)));
				this.chessDataN = this.chessDatas.length;
				if (this.chessDataN >= 3 && !this.chessData.notClick) this.but_hq = false;
				else this.but_hq = true;
				return false;
			},
			repentantChess() {
				let text = this.chessData.value == 1 ? '白棋' : '黑棋';
				this.chessData = JSON.parse(JSON.stringify(this.chessDatas[this.chessDataN - 3]));
				this.chessData.label = text + "方悔棋";
				this.chessData.notClick = false;
				this.chessDatas.push(JSON.parse(JSON.stringify(this.chessData)));
			},
			review() {
				this.isReview = true;
				this.chessData = this.chessDatas[this.chessDataN - 1];
				if (this.chessDataN > 1) this.but_syb = false;
				else this.but_syb = true;
				if (this.chessDataN < this.chessDatas.length) this.but_xyb = false;
				else this.but_xyb = true;
			},
			reviewPlus() {
				this.chessDataN--;
				this.review();
			},
			reviewMinus() {
				this.chessDataN++;
				this.review();
			},
			PlayerVsPlayer() {
				this.chessData.notClick = false;
				this.victory()
			},
		},
		mounted() {
			this.clickCallback = this.pyAiCall;
		},
	}
</script>
<style scoped>

</style>
